<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>
    <title>Vip会员购买</title>
    <link rel="stylesheet" href="/static/h5/css/vip.css" />
</head>
<body>
<div class="modal-vip-info">
    <div class="vip-info-top">
        欢迎您 <span class="fullName">${user.userName!}</span>
        您的可用现金 ￥<span>${userAccount.balance/100}</span>元&nbsp;
        <#if userVip??>
            <#if userVip.isExpired()>
                <span class="expire-date">您的VIP已过期，请续费</span>
            <#else >
                 <span class="expire-date">VIP有效期至${userVip.expireDate!}</span>
            </#if>
        </#if>
    </div>
    <ul class="vip-info-lists">
        <#list memberSales as memberSale>
            <li data-id="${memberSale.id}" data-price="${memberSale.price}" <#if defaultMember.id == memberSale.id>class="recommend-item active"</#if>>
                <p class="vip-item_price">￥<span>${memberSale.price/100}</span>元</p>
                <p class="vip-item_intro">${memberSale.name!}</p>
                <div class="vip-item_line"></div>
                <div class="vip-item_desc">${memberSale.description!}</div>
            </li>
        </#list>
    </ul>
    <div class="vip-info-footer">
        <div class="vip-pay-way" id="user-account-info">
            <div class="fl-l">账户余额</div>
            <div class="fl-r">
                ￥<span style="color:red;">${userAccount.balance/100}</span>元
            </div>
        </div>
        <div class="vip-pay-money">
            <div class="fl-l">应付金额：<span id="current_price">${defaultMember.price/100}</span>元</div>
            <div class="fl-r pay-btn" id="btn-pay-asset">
                <img src="/static/h5/images/icon-pay-asset.svg" alt="">账户支付
            </div>
            <div class="fl-r pay-btn" id="btn-pay-wx">
                <img src="/static/h5/images/icon-pay-wx.svg" alt="">微信支付
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/static/libs/layer/layer.js"></script>
<script type="text/javascript" src="/static/libs/axios/axios.min.js"></script>
<script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
<script type="text/javascript" src="/static/h5/js/order-h5.js"></script>
<script type="text/javascript">
    var userId = ${user.userId};
    var userMoney = ${userAccount.balance};
    var thisId = ${defaultMember.id};
    var thisPrice = ${defaultMember.price};
    //选择开通类型
    $(document).ready(function () {
        $('.vip-info-lists li').on('click', function () {
            var thisLi = $(this);
            thisLi.addClass('active').siblings().removeClass('active');
            thisPrice = parseInt(thisLi.data("price"));
            thisId = parseInt(thisLi.data("id"));
            initVipOrder();
        });
        $('#btn-pay-asset').on('click', function () {
            var data = new FormData();
            data.append("otherId", thisId);
            data.append("orderType", "MEMBER");
            data.append("payType", "ACCOUNT");
            orderCreate(data);
        });
        $('#btn-pay-wx').on('click', function () {
            var data = new FormData();
            data.append("otherId", thisId);
            data.append("orderType", "MEMBER");
            data.append("payType", "WXPAY");
            orderCreate(data);
        });
        initVipOrder();
    });

    function initVipOrder() {
        $('#current_price').text(thisPrice / 100);
        if (userMoney >= thisPrice) {
            $('#btn-pay-wx').css('display', 'none');
            $('#btn-pay-asset').css('display', 'block');
            $('#user-account-info').css('display', 'block');
        } else {
            $('#btn-pay-wx').css('display', 'block');
            $('#btn-pay-asset').css('display', 'none');
            $('#user-account-info').css('display', 'none');
        }
    }
</script>
</body>
</html>